<template>
    <div>
        <el-dialog :title="basicDlgTitle" :visible.sync="basicDlgVisible" :width="basicDlgWidth"
            :before-close="basicDlgHandleClose">
            <!-- 数据区域 -->
            <el-row :gutter="16">
                <el-form :model="basicDlgFormData" style="display: flex; flex-direction: row;flex-wrap: wrap;" 
                    ref="basicDlgForm" :rules="basicDlgRules">
                    <template v-for="(item, index) in basicDlgFormList">
                        <el-col :span="6" v-if="item.type == 'datetimerange'">
                            <el-form-item :label="item.name" style="display:flex;" :prop="item.key">
                                <el-date-picker v-model="basicDlgFormData[item.key]"
                                    :type="item.type || 'datetimerange'" range-separator="至" style="width: 100%"
                                    :format="item.format || 'yyyy - MM - dd'" value-format="yyyy-MM-dd"
                                    start-placeholder="创建日期" end-placeholder="结束日期" :clearable="item.clearable || true"
                                    @change="changeDataPicker">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'input'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;">
                                <el-input v-model="basicDlgFormData[item.key]" :placeholder="item.placeholder"
                                    :clearable="item.clearable || true" style="width: 100%;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'select'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;">
                                <el-select v-model="basicDlgFormData[item.key]" :clearable="item.clearable || true"
                                    :placeholder="item.placeholder" style="width: 100%;">
                                    <el-option v-for="option in item.selectList" :key="option.value"
                                        :label="option.label" :value="option.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'textarea'">
                            <el-form-item :label="item.name" :prop="item.key" style="display:flex;flex-wrap: nowrap;">
                                <el-input v-model="basicDlgFormData[item.key]" :placeholder="item.placeholder"
                                    type="textarea" :rows="item.rows || 2" :clearable="item.clearable || true" autosize
                                    style="width: 100;" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" v-if="item.type == 'upload'">
                            <el-form-item :label="item.name" :prop="item.key">
                                <el-upload class="upload-demo" :limit="item.limit || 1"
                                    action="http://localhost:5237/api/uploadFileService/UploadImgFile" ref="upload"
                                    name="file" :on-success="(file) => handleSuccess(file, item.key)"
                                    :on-remove="(file) => handleRemove(file, item.key)"
                                    :before-upload="(file) => beforeUpload(file, item.key)" list-type="picture"
                                    :file-list="BasicDlgImgList">
                                    <el-button size="small" type="primary">点击上传图片</el-button>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-form>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="basicDlgReset">重置</el-button>
                <el-button type="primary" @click="basicDlgInsert" v-if="basicDlgAction == 'insert'">添加</el-button>
                <el-button type="primary" @click="basicDlgEdit" v-if="basicDlgAction == 'edit'">修改</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
export default {
    name: "BasicDialog",
    props: {
        //输入库列表
        basicDlgFormList: {
            type: Array,
            default: () => [],
        },
        //弹框标题
        basicDlgTitle: {
            type: String,
            default: () => ''
        },
        //是否显示
        basicDlgVisible: {
            type: Boolean,
            default: () => false
        },
        //数据
        basicDlgFormData: {
            type: Object,
            default: () => { }
        },
        //校验规则
        basicDlgRules: {
            type: Object,
            default: () => { }
        },
        //特性 两个特性 edit || insert
        basicDlgAction: {
            type: String,
            default: () => ''
        },
        //宽度
        basicDlgWidth: {
            type: String,
            default: () => '70%'
        },
        //图片
        BasicDlgImgList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            fileList:[]
        }
    },
    created() {
    },
    methods: {
        //上传图片前触发
        beforeUpload(file, key) {
            console.log(file)
            console.log(this.basicDlgFormData)
            console.log(key)
            if (this.basicDlgFormData[key]) {
                this.$message.error('只能上传一张图片~');
            }
        },
        //移除图片触发
        handleRemove(file, key) {
            if (file.status == 'success') {
                this.basicDlgFormData[key] = ''
            }
        },
        //上传图片成功触发
        handleSuccess(file, key) {
            this.basicDlgFormData[key] = file.data
        },
        changeDataPicker() {

        },
        //关闭弹窗
        basicDlgHandleClose() {
            this.$emit("basicDlgHandleClose");

        },
        //添加
        basicDlgInsert() {
            this.$refs.basicDlgForm.validate(async valid => {
                if (valid) {
                    this.$emit("basicDlgInsert", this.basicDlgFormData);
                }
            })
        },
        //编辑
        basicDlgEdit() {
            this.$refs.basicDlgForm.validate(async valid => {
                if (valid) {
                    this.$emit("basicDlgEdit", this.basicDlgFormData);
                }
            })

        },
        //重置按钮
        basicDlgReset() {
            this.$emit("basicDlgReset");
        }
    }
}
</script>

<style scoped>
::v-deep .el-form-item__content {
    flex: 1;
}


</style>